@import '../sass/_reset.scss';
@import '../sass/_ver.scss';
@import '../sass/_mixin.scss';

.nav_tl {
    background-color: #f5f5f5;
    position: relative;
    height: 35px;

    .nav {
        @include Type;
        height: 35px;
        background-color: #f5f5f5;
        display: flex;
        position: relative;
        cursor: pointer;
        
    
        > .nav_lef {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
    
            >li{
                width: 70px;
                height: 35px;
                position: relative;
                font-size: 12px;
                color: gray;
                @include CenTer;
               
            }
            > .nav_lef_li{
              box-sizing: border-box;
              &:hover{
              color: $font_hover;
              background-color: white;
              border-top: 1px solid lightgray;
              border-left: 1px solid lightgray;
              border-right: 1px solid lightgray;
            }
          }
        }
    
        > .nav_rig {
          position: absolute;
          display: flex;
          top: 0;
          right: 0;
    
          > li {
            width: 70px;
            height: 35px;
            @include CenTer;
            font-size: 12px;
            color: gray;

             >a{
              font-size: 12px;
              color: gray;
              &:hover{
              color: $font_hover;
              }
            }
    
            &:hover{
              color: $font_hover;
            }

            &.nav_rig_login{
              display: none;
              box-sizing: border-box;
              padding: 10px 3px 0px  10px;
  
              &.active{
                display: block;
              }
            }

            &.nav_rig_login1{
              display: none;
              color: red;
              box-sizing: border-box;
              padding: 10px 8px 0px  5px;
            
              &.active{
                display: block;
              }
            }
          }


          >.nav_rig_register, .nav_rig_cart{
            color: $font_hover;
          }
        }  
    }
    > .advAppear {
      position: absolute;
      border: 1px solid gray;
      box-sizing: border-box;
      top: 0;
      right: 0;
      width: 20px;
      height: 20px;
      font-size: 26px;
      display: none ;
      color: gray;
      cursor: pointer;
    }
}
.advAppear > div {
    position: absolute;
    top: -7px;
}

// 导航栏--网站导航
.nav_lef_li_webnav {
  position: relative;
  cursor: pointer;
  > .dis_none {
      width: 800px;
      box-sizing: border-box;
      display: none; 
      position: absolute;
      top: 140%;
      left: -11px;
      background-color: white;
      cursor: pointer;
      z-index: 9999;

      > .web_nav {
          padding: 20px;
          border-left: 2px solid #f5f5f5;
          border-right: 2px solid #f5f5f5;
          border-bottom: 2px solid #f5f5f5;
          display: flex;

            > li{
                 width: 160px;
                 padding-left: 10px;
                 border-right: 2px solid #f5f5f5;
                 &:hover{
                    color: $font_hover;
                  }

                   // 特色购物
                 .sp_shopping {
                   color: black;
                   font-size: 14px;
                }
                .sp_shopping_detil{
                   display: flex;
                   flex-wrap: wrap;
                   margin-top: 10px;

                      a {
                        display: block;
                        width: 60px;
                        font-size: small;
                        color: black;
                        font-weight: lighter;

                          &:hover{
                            color: $font_hover;
                          }
                 }
              }
            }
              > .del_border {
                  border: none;
            }
         }
      }
}

// 导航栏--商家合作
.nav_lef_li_webstore{
  position: relative;
}
.dis_none_store{
  position: absolute;
  background-color: white;
  cursor: pointer;
  z-index: 9999;
  top: 150%;
  left: -11px;
   > ul > li{
    width: 144px;
    padding: 10px;
    box-sizing: border-box;
    border-right: 2px solid #f5f5f5;
    border-left: 2px solid #f5f5f5;
    border-bottom: 2px solid #f5f5f5;

    > div {
      display: flex;
      flex-wrap: wrap;

      > a {
        display: block;
        width: 60px;
        margin-top: 5px;
        color: black;
        font-weight: lighter;

        &:hover{
          color: $font_hover;
        }
      }
    }
   }
   display: none;
}

// 导航栏--客户服务
.nav_lef_li_customer {
  position: relative;
  

  > .dis_none_customer{
    position: absolute;
    background-color: white;
    cursor: pointer;
    z-index: 9999;
    top: 150%;
    left: -11px;
    
    > ul > li{
      width: 164px;
      padding: 10px;
      box-sizing: border-box;
      border-right: 2px solid #f5f5f5;
      border-left: 2px solid #f5f5f5;
      border-bottom: 2px solid #f5f5f5;
      > div {
        display: flex;
        flex-wrap: wrap;
        > a {
          display: block;
          width: 70px;
          margin-top: 5px;
          color: black;
          font-weight: lighter;
  
          &:hover{
            color: $font_hover;
          }
        }
      }
     }
   display: none;
  }
}

//导航栏--我的订单
.my_list{
  position: relative;
  &:hover {
    background-color: #fff;
    box-sizing: border-box;
    border-top: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-left: 1px solid lightgray;
  }

  > div > .dis_none_mylist {
    position: absolute;
    background-color: white;
    cursor: pointer;
    z-index: 9999;
    top: 100%;
    left: 0;
    box-sizing: border-box;
    padding: 10px;
    width: 70px;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;

    > a {
      display: block;
      margin-top: 10px;

      &:hover {
        color: $font_hover;
      }
    }
    display: none;
  }
}

//导航栏--我的易购
.my_rig_yigou{
  box-sizing: border-box;
  &:hover {
    background-color: #fff;
    border-top: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-left: 1px solid lightgray;
  }

  >.nav_my_yigou {
    position: relative;
  
    
    > .dis_none_myyigou {
      width: 170px;
      position: absolute;
      background-color: white;
      cursor: pointer;
      z-index: 9999;
      top: 150%;
      left: -10px;
      box-sizing: border-box;
      padding: 10px;
      font-weight: lighter;
      color: black;
  
      > .dis_none_myyigou_top{
        display: flex;
  
        >.myyigou_logo {
           width: 50px;
           height: 50px;
  
           > img{
            width: 100%;
            height: 100%;
           }
        }
  
        > .myyigou_login{
          flex: 1;
          @include CenTer;

          >a {
            font-size: 14px;
              padding: 20px  0px 0px 30px;
        
            &:hover{
               color: $font_hover;
            }
          }
          display: none;
          &.active{
            display: block;
          }
        }

        > .myyigou_dis{
          flex: 1;
          @include CenTer;
          font-size: 14px;
          padding: 20px  0px 0px 30px;
          color: red;

          display: none;
          &.active{
            display: block;
          }
        }
      }
  
      > .dis_none_myyigou_bot {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
  
        > li {
          width: 73px;
          margin-top: 10px;
        }
      }
      border-left: 1px solid lightgray;
      border-right: 1px solid lightgray;
      border-bottom: 1px solid lightgray;
      
      > .dis_none_myyigou_bot > li {
        &:hover {
          color: $font_hover;
        }
      }
      display: none;
    }
  }
}


